import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { View,ScrollView, Text, StyleSheet, TouchableOpacity } from 'react-native'
import screen from '../../../utils/screen'
import TextButton from '../../../widgets/TextButton'

export default class extends PureComponent {
  static propTypes = {
    title: PropTypes.any,
    thumb: PropTypes.any,
    extra: PropTypes.any,
    extraOnPress: PropTypes.func,
  }
  render() {
    const { title, extra,extraTxt, extraOnPress } = this.props
    return (
      <View style={styles.container}>
        <View style={styles.title}>
          <View style={styles.innerTitle}>
            <View style={styles.innerTitleLeft}>
              <View
                style={{
                  height: screen.pxToDp(40),
                  width: screen.pxToDp(11),
                  backgroundColor: '#a0a0a0',
                  marginRight: screen.pxToDp(8),
                }}
              />
              <Text style={{ color: '#636363', fontSize: screen.pxToDp(32) }}>
                {title}
              </Text>
            </View>
            {
              extraTxt &&(
                <View style={styles.innerTitleRight}>
                  <Text style={{ fontSize: screen.pxToDp(32)}}>{extraTxt}</Text>
                </View>
              )
            }
            {extra && (
              <TouchableOpacity onPress={extraOnPress}>
                <View style={styles.innerTitleRight}>
                  <Text style={{ color: '#1296db', fontSize: screen.pxToDp(32)}}>{extra}</Text>
                </View>
              </TouchableOpacity>
            )}
          </View>
        </View>
        <View style={styles.content}>
          <View style={styles.innerContent}>{this.props.children}</View>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
  },
  title: {
    backgroundColor: '#ffffff',
    height: screen.pxToDp(100),
    justifyContent: 'center',
  },
  innerTitle: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  innerTitleLeft: {
    marginLeft: screen.pxToDp(26),
    flexDirection: 'row',
    alignItems: 'center',
  },
  innerTitleRight: {
    marginRight: screen.pxToDp(26),
    flexDirection: 'row',
    alignItems: 'center',
  },
  content: {
    backgroundColor: '#ffffff',
  },
  innerContent: {
    margin: screen.pxToDp(26),
    minHeight: screen.pxToDp(80)
  },
})
